About Cosense
Help
Log in
Aumy
S
i
n
g
l
e
P
a
g
e
A
p
p
l
i
c
a
t
i
o
n
#
W
e
b
フ
ロ
ン
ト
エ
ン
ド
単
一
の
p
a
g
e
で
構
成
さ
れ
る
ア
プ
リ
ケ
ー
シ
ョ
ン
の
こ
と
こ
こ
で
の
p
a
g
e
と
は
1
つ
の
H
T
M
L
ド
キ
ュ
メ
ン
ト
の
こ
と
ど
ち
ら
か
と
い
う
と
ブ
ラ
ウ
ザ
か
ら
見
た
視
点
特
に
、
(
ブ
ラ
ウ
ザ
か
ら
見
た
視
点
で
は
)
単
一
の
p
a
g
e
で
あ
り
な
が
ら
H
i
s
t
o
r
y
A
P
I
な
ど
の
A
P
I
を
駆
使
し
て
あ
た
か
も
複
数
の
ペ
ー
ジ
間
を
遷
移
し
て
い
る
か
の
よ
う
に
見
せ
か
け
る
技
術
C
l
i
e
n
t
-
s
i
d
e
n
a
v
i
g
a
t
i
o
n
と
よ
ば
れ
る
こ
と
も
あ
る
か
も
さ
ら
に
狭
義
に
は
、
(
広
義
の
)
S
e
r
v
e
r
-
s
i
d
e
R
e
n
d
e
r
i
n
g
を
行
わ
ず
、
主
要
な
U
I
要
素
が
ク
ラ
イ
ア
ン
ト
サ
イ
ド
J
a
v
a
S
c
r
i
p
t
に
よ
っ
て
構
築
さ
れ
る
も
の
こ
の
場
合
は
C
l
i
e
n
t
-
s
i
d
e
R
e
n
d
e
r
i
n
g
と
同
義
Related
Sort by
Related
Modified
Created
Last visited
Most linked
Page rank
Title
Links
Webフロントエンド
Webブラウザとゆかいな仲間たちっていってたの誰だっけ
MPA
Multi Page Application<-> [Single Page Application]
Mint
#プログラミング言語https://www.mint-lang.com/[Single Page Application] を書くためのプログラミング言語らしい>Mint has all the tools you need to write [* error free, easily readable] and [* maintainable] applications in [* record time].
Elm
Webフロントエンド
なんとかstack
2023-09初頭、Rails系の[Webフロントエンド]ツール (ライブラリ?) であるturboでTypeScriptが消されたらRubyとDHHが嫌いなTypeScript過激派がリポジトリを荒らしてかなりいい話になった問題なのがそのTS過激派の中にt3 stackという俺が考えたWebフロントエンド最強技術スタックを提唱してそこそこ有名な人 (Theo, t3dotgg) がいたこと起こる批判
Vite
ヴィートフランス語[Webフロントエンド] の次世代[バンドラ]([webpack] と比較して) 設定が少ない[PostCSS]とか[Babel]がout-of-boxで使える
#下書き webフロントエンドツールの概要と選び方
#draft #webフロントエンドざっくりしたまとめ[Node.js]界隈はRailsへの反動で (?) ミニマルとかシンプル志向が強くUNIX (do one thing well) なツールを組み合わせて使う文化があり、Node.jsで動くフロントエンドツール界もそんな感じでやってきたwebpackにbabel-loaderとsass-loaderとcss-loaderとstyle-loaderと……
Vue.js
#Webフロントエンドフレームワーク[Webフロントエンド] フレームワーク[HTML]テンプレート、コード、[CSS]を1ファイルに書くSFC([Single File Component]: .vue)というやつがあるSuper Family ComputerとかShonan Fujisawa CampusとかStateless Functional Componentではないこれの[TypeScript]サポートが最近強くなってきた
モダンWebフロントエンドツールチェイン概観
#WebフロントエンドなぜWebフロントのツールは厚いのか宣言的UIのため宣言的UIに向く独自フォーマットのソースファイル ([Single File Component], [JSX])をプレーンなJavaScriptに変換したい`@vue/compiler-sfc`, `@babel/plugin-transform-react-jsx`, tsc など
Webフロントエンドフレームワーク
[Webフロントエンド] 開発でUIとかを作るためのフレームワーク
Server-side Rendering
ParcelでServer Components
#bookmarkhttps://parceljs.org/recipes/rsc/#examples使い方が大きく分けて2種説明されている[Server-side Rendering]しないクライアントサイドアプリの一部をサーバーに投げるMarkdownの変換とかをサーバーに持たせることでMarkdownライブラリをクライアントに送信しない、的な
Next.js
Node.js
Astro
Webサイトのための [MPA] フレームワーク[Vue.js] (特に`script setup`) や[Svelte]っぽい独自のテンプレート言語 (拡張子 `.astro`) をもち、データフェッチを [JavaScript] ([TypeScript]) で書くSPAのクライアントサイドルータが入っていないMPAなので、明示的に導入しない限りランタイムのJSはついてこないそういう側面もありつつ必要に応じて[React]などを入れられる
Remix
[React] の [Server-side Rendering] フレームワーク[react-router] を使うCDN edgeで動くSSRのみでSSGなどはない
このコードはいつ実行されるんだっけ?
#draftJavaScriptはサーバでもクライアントでも同じ言語を使って開発できるというのが売りのひとつである一方で,「このコードはいつどのタイミングで走るんだっけ?」という疑問・意識を持っておかないと,意図したとおりにコードが動かなくなって辛いことになる.特に [React], [Vue.js] を使ったWebフロントエンド開発,さらに [Server-side Rendering] などが絡むとやばい
New Links
History API
Client-side Rendering
Created
2 years ago
by
おーみー
Updated
2 years ago
by
おーみー
Views: 5
Page rank: 7.4
Copy link
Copy readable link
Start presentation
Hide dots
Single Page Application
#Webフロントエンド
単一のpageで構成されるアプリケーションのこと
ここでのpageとは1つのHTMLドキュメントのこと
どちらかというとブラウザから見た視点
特に、(ブラウザから見た視点では) 単一のpageでありながら
History API
などのAPIを駆使してあたかも複数のページ間を遷移しているかのように見せかける技術
Client-side navigationとよばれることもあるかも
さらに狭義には、(広義の)
Server-side Rendering
を行わず、主要なUI要素がクライアントサイドJavaScriptによって構築されるもの
この場合は
Client-side Rendering
と同義